How to customize the label text content, color, and layout of a pie chart?

Question Description

Can I customize the label text, color, and layout of a pie chart similar to the one? What level of customization is supported and how can I configure it?

Solution

Different chart libraries have different levels of support for pie charts, and the level of support for pie chart labels also varies. In VChart:

The text content of the label: You can set custom label content through the label.formatMethod callback function. Please refer to the configuration document.
The text color of the label: You can set the style of the text, including color, font, size, etc., through label.style. Any attribute supported by VChart text graphics can be configured. Please refer to the configuration document.
The layout of the label: If you simply want to adjust the position of the label, you can set label.position to determine whether the label is inside or outside. If you want to adjust the layout strategy, you can use label.layout for detailed adjustments. Please refer to the configuration document for more information.

Code Example

- Custom text content and text color.

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '46.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
        { type: 'sodium', value: '2.83' },
        { type: 'potassium', value: '2.59' },
        { type: 'others', value: '3.5' }
      ]
    }
  ],
  outerRadius: 0.8,
  valueField: 'value',
  categoryField: 'type',
  title: {
    visible: true,
    text: 'Statistics of Surface Element Content'
  },
  legends: {
    visible: true,
    orient: 'left'
  },
  scales: [{
    id: 'labelScale',
    type: 'linear',
    domain: [{
      dataId: 'id0',
      fields: ['value']
    }],
    range: ['red', 'green'],
  }],
  label: {
    visible: true,
    formatMethod: (text, datum) => {
      return `${datum.type}: ${datum.value}`
    },
    style: {
      fill: {
        scale: 'labelScale',
        field: 'value'
      }
    }
  },
  tooltip: {
    mark: {
      content: [
        {
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Custom layout, placing labels inside a pie chart.